<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-19 10:15:03
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:32:14
 * @FilePath: \nien-vue3-admin\src\views\finance\receiverManame\reconciliationManagement\Receivable\collectionManage\airSeaDispatchWriteOff\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <custom-container ref="customContainerRef" :config="config" />
  <write-off-dialog ref="writeOffDialogRef" />
</template>
<script setup lang="ts">
import { computed, reactive, defineAsyncComponent, ref } from 'vue'
import { ElButton, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

const WriteOffDialog = defineAsyncComponent(() => import('./components/WriteOffDialog.vue'))

const router = useRouter()
const multipleSelection = ref([])
const writeOffDialogRef = ref(null)

const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  afterCurrency: undefined,
  exchangeRate: undefined,
  startDate: undefined,
  endDate: undefined,
  remark: undefined,
})
const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '账单编号',
            prop: 'afterCurrency',
          },
          {
            // type: 'select',
            label: '客户名称',
            prop: 'customerCode',
            // option: {
            //   dictInfo: { dict: DictDirection.客户 },
            // },
          },
          {
            label: '是否核销',
            prop: 'exchangeRate',
          },
        ],
        queryParams,
        formOption: {},
      },
      btns: [],
      table: {
        columns: [
          { type: 'selection', width: '55', align: 'center' },
          { label: '对账单日期', align: 'center', prop: 'beforeCurrency' },
          { label: '对账单编号', align: 'center', prop: 'afterCurrency' },
          { label: '客户名称', align: 'center', prop: 'exchangeRate' },
          { label: '账单总金额（￥）', align: 'center', prop: 'startDate' },
          { label: '待核销金额', align: 'center', prop: 'startDate' },
          { label: '收款总金额（￥）', align: 'center', prop: 'startDate' },
          { label: '是否核销', align: 'center', prop: 'startDate' },
          { label: '核销人', align: 'center', prop: 'startDate' },
          { label: '核销时间', align: 'center', prop: 'startDate' },
          {
            label: '操作',
            align: 'center',
            width: '250',
            fixed: 'right',
            render(h, params) {
              return [
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      writeOffDialogRef.value.open(params.row)
                    },
                  },
                  {
                    default: () => '核销',
                  },
                ),
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      ElMessageBox.confirm('此操作将核销此账单全部金额, 是否确定？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                      }).then(() => {
                        console.log(222)
                      })
                    },
                  },
                  {
                    default: () => '已核销反审核',
                  },
                ),
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      router.push({
                        name: 'AirSeaDispatchWriteOffDetail',
                      })
                    },
                  },
                  {
                    default: () => '详情 ',
                  },
                )]
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            multipleSelection.value = rows
          },
        },
      },
      api: () => Promise.resolve({ code: 200, data: [{ a: 2 }, { b: 2 }] }),
    }
  },
  set(val) {
    return val
  },
})

</script>